<template>
  <div :class="['view-table', {'mb20': mb}]">
    <div class="table-title" v-if="info.title">
      {{info.title}}：
    </div>
    <table class="table-center">
      <colgroup>
        <col
        v-for="(item, idx) in info.distributed"
        :key="idx" :class="'w'+item">
      </colgroup>
      <thead>
        <tr>
          <th v-for="(item, idx) in info.head" :key="idx">{{item}}</th>
        </tr>
      </thead>
      <tbody>
        <!-- 表体信息有多行时使用父级视图插入插槽 -->
        <slot name="table_list"></slot>
        <tr v-if="list" v-for="(item, idx) in list" :key='idx'>
          <td v-for="(el, key) in map" :key='key'>
            <!-- {{item[el]}} -->
            {{item[el] ? item[el] : "--"}}
          </td>
        </tr>
        
        <tr v-if="false">
          <td v-for="n in info.head.length">
            <slot :name="'cell'+n"></slot>
            <input type="text" class="input-none bottom-line text-center input-cell" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</template>

<script>

  export default {
    props: {
      // 渲染表格的数据
      info: {
        required: true,
        default: {

        },
        valid: "",
      },
      // 表格渲染的数据列表
      list: {
        default: false,
      },
      // 映射关系
      map: {},
      mb: {
        default: true,
        required: false,
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
